<template>
  <div class="lang-switch">
    <el-select v-model="currentLang" placeholder="Select Language">
      <el-option label="中文" value="zh-CN">
        <el-link @click="changeLang('zh-CN')" type="primary">中文</el-link>
      </el-option>
      <el-option label="English" value="en">
        <el-link @click="changeLang('en')" type="primary">English</el-link>
      </el-option>  
      <el-option label="Español" value="es-EC">
        <el-link @click="changeLang('es-EC')" type="primary">Español</el-link>
      </el-option>
    </el-select>
  </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n'

const { locale } = useI18n()
const currentLang = locale  // 当前语言

// 切换语言
const changeLang = (lang) => {
  locale.value = lang
  localStorage.setItem('selectedLang', lang) // 持久化存储
}

// 初始化时读取本地存储的语言
const storedLang = localStorage.getItem('selectedLang')
if (storedLang) {
  locale.value = storedLang
}
</script>

<style scoped>
.lang-switch{
    /* background-color: rgb(145, 214, 228); */
    width: 100px;
    height: 70px;
    /* display: flex; */
    /* flex-direction: column; */
}
.lang-switch button {
  margin: 4px 8px;
  padding: 4px 12px;
  cursor: pointer;
}
.active {
  background: #42b983;
  color: white;
  border: 1px solid #42b983;
}
</style>